var gulp = require('gulp');

var postcss = require('gulp-postcss');

var sass = require('gulp-sass');

var stylelint = require('gulp-stylelint');

var browserSync = require('browser-sync').create();

var reload = browserSync.reload;

gulp.task('serve', ['scss'], function() {

    browserSync.init({
        server: "./"
    });

    gulp.watch("src/*.scss", ['scss']);
    gulp.watch("*.html").on('change', reload);
});

gulp.task('scss',function(){
	return (
		gulp.src('./src/*.scss')
		
		.pipe(stylelint({
			failAfterError: false,
			reporters: [
				{ formatter: 'string', console: true}	
			]
		}))
			
		.pipe( sass({
			errLogToConsole: true	
		}))
		
		
		.pipe(postcss([
			require("postcss-import")(),
			require("postcss-url")(),
			require("postcss-cssnext")(),
			//add your "plugins" here
			require("postcss-browser-reporter")(),
			require("postcss-reporter")(),
			
		]))
		
		.pipe(gulp.dest('./dest'))
                .pipe(reload({stream: true}))
	)
});

gulp.task('watch',function(){
	gulp.watch("src/*.scss",['scss']);
});

gulp.task('default',['serve']);
